<template>
  <div class="all">
    <div class="box1">
      <echarts2 id="echarts1" :option="option1" :styles="styles1"></echarts2>
    </div>
    <div class="box2">
      <echarts2 id="echarts2" :option="option2" :styles="styles1"></echarts2>
    </div>
    <div class="box2">
      <echarts2 id="echarts3" :option="option3" :styles="styles1"></echarts2>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import echarts2 from "@/components/echarts.vue";

export default {
  name: "Five",
  props: {
    chartDataOne1: {
      type: Array,
      default: () => {
        return [];
      }
    },
    chartDataOne2: {
      type: Array,
      default: () => {
        return [];
      }
    },
    chartDataOne3: {
      type: Array,
      default: () => {
        return [];
      }
    },
    chartDataOne4: {
      type: Array,
      default: () => {
        return [];
      }
    },
    nameList: {
      type: Array,
      default: () => {
        return  ["2019.1","2019.2","2019.3","2019.4","2019.5","2019.6","2019.7"];
      }
    },
    legendList: ["全部隐患1", "安全隐患", "质量隐患", "重大隐患"],
    hChartData: {
      type: Array,
      default: () => {
        return [];
        // return [20,30],;
      }
    },
    hNameList: {
      type: Array,
      default: () => {
        // return ["一般隐患", "严重隐患"],;
        return [];
      }
    },
    hChartData2: {
      type: Array,
      default: () => {
        return [];
        // return [20, 25];
      }
    },
    hNameList2: {
      type: Array,
      default: () => {
        // return [ "监测预警", '安质检查'];
        return [];
      }
    },

  },
  data() {
    var colors = ['#00A0E9', '#ffff00', '#80c269', '#6461fc'];
    return {
      styles1: {
        width: "100%",
        height: "100%",
        margin: "0 auto"
      },
      //
      option1: {
        barWidth: 10,
        // barGap:'80%',
        // "splitLine": {     //网格线
        //   "show": false
        // },
        xAxis: {
          // show : false,
          boundaryGap: false,
          type: "category",
          data: this.nameList,
          axisTick: {
            show: false
          },
          // position: 'b',
          // 去掉y轴坐标线
          axisLine: {
            show: false
          },
          // 设置字体
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12
            }
          }
        },
        legend: {
          textStyle: {
            color: "#fff"
          },
          icon: "roundRect", //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 16, // 设置宽度
          itemHeight: 8, // 设置高度
          itemGap: 12, // 设置间距
          top: 10,
          // data: ["全部隐患", "安全隐患", "质量隐患", "重大隐患"]
          data: this.legendList
        },
        series: 
        
        /*function(){
          let arr =[]
           this.chartData.forEach((item, index) => {
            arr.push (
              {
                name: this.legendList[index],
                type: "line",
                data: item,
                symbol: "circle", //折点设定为实心点
                symbolSize: 8, //设定实心点的大小
                itemStyle: {
                  normal: {
                    barBorderRadius: [10, 10, 0, 0],
                    color: colors[index],
                    lineStyle: {
                      color: colors[index] //折线颜色
                    }
                  }
                }
              }
            )
          })
          console.log('---')
          console.log(arr)
          return arr
        },*/
        [
          {
            name: "全部隐患",
            type: "line",
            // data: [600, 900, 1100, 700, 200, 500, 900],chartDataOne1
            data: this.chartDataOne1,
            symbol: "circle", //折点设定为实心点
            symbolSize: 8,
            itemStyle: {
              normal: {
                barBorderRadius: [3, 3, 0, 0],
                color: "#00A0E9",
                lineStyle: {
                  color: "#00A0E9" //折线颜色
                }
              }
            }
          },
          {
            name: "安全隐患",
            type: "line",
            // data: [30, 1100, 200, 900, 1100, 400, 300],this.chartDataOne2
            data: this.chartDataOne2,
            symbol: "circle", //折点设定为实心点
            symbolSize: 8, //设定实心点的大小
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: "#ffff00",
                lineStyle: {
                  color: "#ffff00" //折线颜色
                }
              }
            }
          },
          {
            name: "质量隐患",
            type: "line",
            // data: [30, 1100, 200, 900, 1100, 400, 300],this.chartDataOne1
            data: this.chartDataOne3,
            symbol: "circle", //折点设定为实心点
            symbolSize: 8, //设定实心点的大小
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: "#80c269",
                lineStyle: {
                  color: "#80c269" //折线颜色
                }
              }
            }
          },
          {
            name: "重大隐患",
            type: "line",
            // data: [30, 1100, 200, 900, 1100, 400, 300],this.chartDataOne1
            data: this.chartDataOne4,
            symbol: "circle", //折点设定为实心点
            symbolSize: 8, //设定实心点的大小
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 0, 0],
                color: "#6461fc",
                lineStyle: {
                  color: "#6461fc" //折线颜色
                }
              }
            }
          }
        ],
        // 设置图标的位置
        grid: {
          x: 10,
          x2: 30,
          // y:10,
          y2: 30,
          containLabel: true
        },
        yAxis: [
          {
            type: "value",
            // max : 1200,
            // min: 400,
            splitNumber: 4,
            // 去掉刻度
            axisTick: {
              show: false
            },
            bottom: 10,
            // show : false,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            // #0d1b4b
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#0d1b4b"],
                width: 1,
                type: "solid"
              }
            },
            // 设置字体
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 12
              }
            }
          }
        ]
      },
      option2: {
        title: {
          text: '隐患严重性统计',
          color:　'#fff',
          left: 5,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        barWidth: 10,
        // 设置图标的位置
        grid: {
          x: 40,
          x2: 60,
          y: 20,
          y2: 10,
          containLabel: true
        },
        yAxis: {
          minInterval: 1,
          type: "category",
          show: true,
          // 去掉y轴坐标线
          data: this.hNameList,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // 设置字体
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12
            }
          }
        },

        series: [
          {
            name: "隐患",
            type: "bar",
            data: this.hChartData,
            itemStyle: {
              normal: {
                // normal:{
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                // color: function (params){
                //     var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                //     return colorList[params.dataIndex];
                // }
                barBorderRadius: [0, 3, 3, 0],
                color: function(params) {
                  let colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      {
                        offset: 0,
                        color: "#FDFECC"
                      },
                      {
                        offset: 1,
                        color: "#FFFF00"
                      }
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      {
                        offset: 0,
                        color: "#53FFED"
                      },
                      {
                        offset: 1,
                        color: "#009AE1"
                      }
                    ])
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ],
        xAxis: [
          {
            type: "value",
            // max : 1200,
            // min: 400,
            splitNumber: 4,
            // 去掉刻度
            axisTick: {
              show: false
            },
            // data: ["苹果","小米","华为","其他"] ,
            bottom: 10,
            // show : false,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#0d1b4b"],
                width: 1,
                type: "solid"
              }
            },
            // 设置字体
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 12
              }
            }
          }
        ]
      },
      option3: {
        title: {
          text: '隐患性质统计',
          color:　'#fff',
          left: 5,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        barWidth: 10,
        // 设置图标的位置
        grid: {
          x: 40,
          x2: 60,
          y: 20,
          y2: 10,
          containLabel: true
        },
        yAxis: {
          minInterval: 1,
          type: "category",
          show: true,
          // 去掉y轴坐标线
          data: this.hNameList2,
          // data: ["安全隐患", "质量隐患"],hNameList2
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          // 设置字体
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12
            }
          }
        },

        series: [
          {
            name: "隐患",
            type: "bar",
            data: this.hChartData2,
            // data: [30, 23],
            itemStyle: {
              normal: {
                // normal:{
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                // color: function (params){
                //     var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
                //     return colorList[params.dataIndex];
                // }
                barBorderRadius: [0, 3, 3, 0],
                color: function(params) {
                  let colorList = ['#80C269', '#6461FC']
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ],
        xAxis: [
          {
            type: "value",
            // max : 1200,
            // min: 400,
            splitNumber: 4,
            // 去掉刻度
            axisTick: {
              show: false
            },
            // data: ["苹果","小米","华为","其他"] ,
            bottom: 10,
            // show : false,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            //网格样式
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#0d1b4b"],
                width: 1,
                type: "solid"
              }
            },
            // 设置字体
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: 12
              }
            }
          }
        ]
      }
    };
  },
  components: {
    echarts2
  }
};
</script>
<style lang="scss">
.all {
  width: 100%;
  height: calc(100% - 42px);
  flex: 1;
  .box1 {
    // background: pink;
    width: 100%;
    height: 44%;
  }
  .box2 {
    // background: pink;
    width: 100%;
    height: 28%;
  }
}
</style>